<template>
    <div id="login-main-div">
        <h1 id="title-div">Banana Platform</h1>
        <!--
            【el-tab】
            :model属性：绑定data中的activeName变量，用来控制当前显示的tab-pane
            type属性：样式
            closable：标签是否可关闭（默认否）
            addable：标签是否可增加（默认否）
         -->
         <el-tabs v-model="activeTab" type="card">
            <el-tab-pane label="登录" name="login-tab" class="login-tab-class">
                <!--
                    【el-form】
                    ref属性:绑定控件到ruleForm
                    之后可通过$refs增加校验： $refs[ruleForm].validate((valid)=>{#校验过程#});
                    :model属性：绑定data中的ruleForm变量
                -->
                <el-form ref="loginRuleForm" 
                    :model="loginRuleForm" 
                    :rules="loginRules"
                    label-width="80px">
                    <el-form-item label="用户名">
                        <el-input v-model="loginRuleForm.userName"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <!--
                            【el-input】
                            1.不支持:model，只能用v-model
                            2.type属性：password/textarea
                         -->
                        <el-input type="password" v-model="loginRuleForm.password" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <!-- loading=true：不可点击 -->
                        <el-button type="primary" :loading="loading" @click="login()">登录</el-button> 
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="注册" name="register-tab" class="login-tab-class">
                <el-form ref="registerRuleForm" 
                    :model="registerRuleForm" 
                    :rules="registerRules"
                    label-width="80px">
                    <el-form-item label="用户名">
                        <el-input v-model="registerRuleForm.userName"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input type="password" v-model="registerRuleForm.password" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码">
                        <el-input type="password" v-model="registerRuleForm.confirm" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="register()">注册</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
        
    </div>
</template>

<script>
export default {
    name:'login',
    data(){
        const validateUsername = (rule, value, callback) => {
            // if (!isvalidUsername(value)) {
            //     callback(new Error('请输入正确的用户名'))
            // } else {
            //     callback()
            // }
            callback()
        };
        const validatePass = (rule, value, callback) => {
            if (value.length < 6) {
                callback(new Error('密码不能小于6位'))
            } else {
                callback()
            }
        };
        const validateConfirm = (rule, value, callback) => {
            if (value.length === '') {
                callback(new Error('请输入确认密码'))
            } else if(value != this.registerRuleForm.password){
                callback(new Error('两个密码不一致！'))
            }else{
                callback()
            }
        };
        return {
            loading :false,
            activeTab:'login-tab', //当前tab页
            loginRuleForm:{
                userName:'',
                password:''
            },
            registerRuleForm:{
                userName:'',
                password:'',
                confirm:''
            },
            loginRules: {
                username: [{required: true, trigger: 'blur', validator: validateUsername}],
                password: [{required: true, trigger: 'blur', validator: validatePass}]
            },
            registerRules: {
                username: [{required: true, trigger: 'blur', validator: validateUsername}],
                password: [{required: true, trigger: 'blur', validator: validatePass}],
                confirm:  [{required: true, trigger: 'blur', validator: validateConfirm}]
            }
        }
    },
    methods:{
        login(){
            this.$refs.loginRuleForm.validate(valid =>{
                if(valid){
                    this.loading = true;
                    //调用store中action的Login方法
                    this.$store.dispatch('Login',this.loginRuleForm).then(()=>{
                        this.loading = false;
                        this.$router.push({path: '/home'})
                    }).catch(()=>{
                        this.loading = false;
                    })
                } else {
                    return false;
                }
            })
        },
        register(){
            this.$refs.registerRuleForm.validate(valid =>{
                if(valid){
                    this.loading = true;
                    this.$store.dispatch('Register',this.registerRuleForm).then(()=>{
                        this.loading = false;
                        this.activeTab="login-tab";
                        this.loginRuleForm.userName=this.registerRuleForm.userName;
                        this.loginRuleForm.password='';
                        this.registerRuleForm.userName='';
                        this.registerRuleForm.password='';
                        this.registerRuleForm.confirm='';
                    }).catch(()=>{
                        this.loading = false;
                    })
                } else {
                    return false;
                }
            })
        },
    }

}
</script>

<style>
#login-main-div {
     width: 600px;
     height: 400px;
     margin: 0 auto;

}

.login-tab-class{
  border-radius: 25px;
  padding:50px;
  background-color: lightblue;
}
</style>